<!-- 终端状态信息 -->
<template>
    <el-form label-width="120px" size="small">
        <el-row>
            <el-col :span="12">
                <el-form-item :label="$t('CPU负载')+':'" :class="cpuLoadClassName">
                    {{ editorForm.cpuLoad | cpuVal(te) }}{{ editorForm.cpuLoadRule | cpuLoadRuleVal }}
                </el-form-item>
                <el-form-item :label="$t('内存占用率')+':'" :class="memLoadClassName">
                    {{ editorForm.memLoad | memVal(te) }}{{ editorForm.memLoadRule | memLoadRuleVal }}
                </el-form-item>
                <el-form-item :label="$t('上传速率')+':'">
                    {{ editorForm.uploadSpeed | speedVal(te) }}
                </el-form-item>
                <el-form-item :label="$t('下载速率')+':'">
                    {{ editorForm.currDownloadSpeed | speedVal(te) }}
                </el-form-item>
                <el-form-item :label="$t('DTMB信号')+':'">
                    {{ editorForm.dtmbSignal | signalFilter }}
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('在线状态')+':'">
                    {{ editorForm.online | onlineFilter(te) }}
                </el-form-item>
                <el-form-item :label="$t('最后上线时间')+':'">
                    {{ editorForm.lastOnlineTime | unknowVal(te) }}
                </el-form-item>
                <el-form-item :label="$t('最后心跳时间')+':'">
                    {{ editorForm.lastHeartTime | unknowVal(te) }}
                </el-form-item>
                <el-form-item :label="$t('心跳间隔')+':'">
                    {{ editorForm.currHeartInterval | currHeart(te) }}({{ $t('设定值')+':'+editorForm.heartbeatInterval+$t('秒') }})
                </el-form-item>
                 <el-form-item :label="$t('在线时间')+':'">
                    {{ editorForm.onlineTime | formatSecondsFilter(te) }}
                </el-form-item>
                <el-form-item :label="$t('GPS')+':'">
                    {{ editorForm.latlng | gpsFilter }}
                </el-form-item>
                <el-form-item :label="$t('4G信号')+':'">
                    {{ editorForm.simSignal | signalFilter }}
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item :label="$t('当前显示屏故障')+':'">
            {{ editorForm.currParam | currParamFilter }}
        </el-form-item>
        <el-form-item :label="$t('当前下载文件')+':'">
            {{ editorForm.currDownload }}
        </el-form-item>
        <bs-progress :progress-data="editorForm"></bs-progress>
    </el-form>
</template>

<script>

export default {
    name: "DeviceStateInfo",
    data() {
        return {
            tableData: [],
            monitorPic: require('../../images/monitoring.gif')
        }
    },
    props: {
        editorForm: {
            default:{}
        }
    },
    filters: {
        cpuVal(val,te) {
            if (val === undefined || val === '') {
                return te('未知')
            }
            return val + `%`
        },
        cpuLoadRuleVal(val) {
            if (val === undefined || val === '') {
                return ''
            }
            return '(' + val + `%)`
        },
        memVal(val,te) {
            if (val === undefined || val === '') {
                return te('未知')
            }
            return val + `%`
        },
        memLoadRuleVal(val)
        {
            if (val === undefined || val === '') {
                return ''
            }
            return '(' + val + `%)`
        },
        speedVal(val,te) {
            if (val === undefined || val === '') {
                return te('未知')
            }
            return val + ` KB/s`
        },
        currHeart(val,te) {
            if (val === undefined || val === '') {
                return te('未知')
            }
            return val + te('秒')
        },
        temperateVal(val,te) {
            if (val === undefined || val === '') {
                return te('未知')
            }
            return val ? parseFloat(val).toFixed(1) + '℃':''
        },
        temperateRuleVal(val) {
            if (val === undefined || val === '') {
                return ''
            }
            return '('+ val +'℃)'
        },
        onlineFilter(val,te) {
            if (val == 1) {
                return te('在线')
            } else if(val === undefined) {
                return te('未知')
            }else if(val == 0){
                return te('离线')
            }else{
                return te('待机')
            }
        },
        gpsFilter(val)
        {
            if(val)
            {
                var arr = val.split(",");
                return 'N:'+arr[0]+',E:'+arr[1]
            }
            return ''
        },
        formatSecondsFilter(value,te) {
            if(!value){
                let res = '';
                res += '0' + te('小时');
                res += '0' + te('分钟');
                res += '0' + te('秒');
                return res
            }
            let result = parseInt(value)
            let h = Math.floor(result / 3600);
            let m = Math.floor((result / 60 % 60));
            let s = Math.floor((result % 60));

            let res = '';
            res += `${h}` + te('小时');
            res += `${m}` + te('分钟');
            res += `${s}` + te('秒');
            return res;
        },
        signalFilter(val) {
            return val ? parseFloat(val).toFixed(1):''
        },
        currParamFilter(val) {
            if(val){
                var jsonArr = eval(val)
                let result = ''
                jsonArr.forEach(item => {
                    result = result + item.addr + ':' + item.status+ ' '
                });
                return result
            }
            return ''
        }
    },
    computed:{
        cpuLoadClassName() {
            if(
                this.editorForm.cpuLoadRule != undefined &&
                this.editorForm.cpuLoad != undefined &&
                parseFloat(this.editorForm.cpuLoad) > parseFloat(this.editorForm.cpuLoadRule)
              )
            {
                return 'warn-class'
            }
            return ''
        },
        memLoadClassName() {
            if(
                this.editorForm.memLoadRule != undefined &&
                this.editorForm.memLoad != undefined &&
                parseFloat(this.editorForm.memLoad) > parseFloat(this.editorForm.memLoadRule)

              )
            {
                return 'warn-class'
            }
            return ''
        },
        temperateClassName() {
            if(
                this.editorForm.temperatureRule != undefined &&
                this.editorForm.temperature != undefined &&
                parseFloat(this.editorForm.temperature) > parseFloat(this.editorForm.temperatureRule)
              )
            {
                return 'warn-class'
            }
            return ''
        }
    },
    methods:{
        te(arg) {
            const hasKey = this.$te(arg)
            if (hasKey) {
            const result = this.$t(arg)
            return result
            }
            return arg
        },
    }

}
</script>

<style lang="scss" scoped>
.warn-class {
  color: red;
}
</style>
